<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-form :form="form" :labelCol="{ span: 4 }" labelAlign="left">
      <a-form-item label="疫苗类型：" :wrapperCol="{ span: 18 }" required c>
        <a-select
          @change="handleChange('type', $event)"
          placeholder="请选择疫苗类型"
        >
          <a-select-option
            v-for="i in typeOptions"
            :key="i.value"
            :value="i.value"
          >
            {{ i.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="疫苗名称：" :wrapperCol="{ span: 18 }" required>
        <a-input
          placeholder="请输入疫苗名称"
          :value="form.name"
          @change="handleChange('name', $event)"
        />
      </a-form-item>
      <a-form-item label="适应症：" :wrapperCol="{ span: 18 }" required>
        <a-input
          :value="form.ingredients"
          placeholder="请输入疫苗适应症"
          @change="handleChange('ingredients', $event)"
        />
      </a-form-item>
      <a-form-item label="批次号：" :wrapperCol="{ span: 18 }" required>
        <a-input
          :value="form.batchNumber"
          style="width: 100% !important"
          placeholder="请输入批次号"
          @change="handleChange('batchNumber', $event)"
        />
      </a-form-item>
      <a-form-item label="有效期：" :wrapperCol="{ span: 18 }" required>
        <a-date-picker
          :value="form.lifespan"
          style="width: 100%"
          @change="onChange"
        />
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import moment from "moment";
export default {
  name: "VaccinumForm",
  emit: ["setVaccinumForm"],
  props: ["form"],
  data() {
    return {
      typeOptions: [
        {
          value: 1,
          name: "狂犬疫苗",
        },
        {
          value: 2,
          name: "猫瘟疫苗",
        },
        {
          value: 3,
          name: "犬瘟热疫苗",
        },
      ],
    };
  },
  methods: {
    onChange(e) {
      this.$emit("setVaccinumForm", {
        value: moment(e).format("YYYY-MM-DD"),
        type: "lifespan",
      });
    },
    handleChange(type, target) {
      console.log("target", type, target);
      this.$emit("setVaccinumForm", {
        value: ["type"].includes(type) ? target : target.target.value,
        type,
      });
    },
  },
};
</script>

<style scoped>
.rounded_8 {
  border-radius: 8px;
}
</style>
